<template>
  <div>
    <el-row>
      <el-col :span="10">
        选择水果:
        <el-select v-model="fruit" multiple clearable @clear="myClear">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
      <el-col :span="10">
        选择水果:(+1)
        <el-select v-model="fruit2" multiple collapse-tags>
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6">
        <el-form :model="form" ref="myTestForm" :rules="rules">
          <el-form-item label="天数（任意整数）" prop="days">
            <el-input type="number" v-model="form.days" placeholder="请输入任意整数"
                      oninput="value=parseInt(value.replace(/[^\d]/g,''))" clearable/>
          </el-form-item>
          <el-form-item label="天数2（1-100整数）" prop="days2">
            <el-input type="number" v-model="form.days2" placeholder="请输入任意整数"
                      oninput="value=parseInt(value.replace(/[^\d]/g,''))" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('myTestForm')">提交</el-button>
            <el-button @click="resetForm('myTestForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义检验规则 必须位于return上方
    let checkNumber = (rule, value, callback) => {
      if (value === '' || typeof value === 'undefined' || value == null) {
        return callback(new Error('内容不能为空'))
      } else if (value < 1 || value > 100) {
        return callback(new Error('范围必须处于[1,100]'))
      } else {
        callback()
      }
    };
    return {
      options: [
        {label: '苹果', value: 1},
        {label: '葡萄', value: 2},
        {label: '柚子', value: 3},
        {label: '西瓜', value: 4},
        {label: '杏仁', value: 5},
      ],
      fruit: [1, 2],

      options2: [
        {label: '苹果', value: 1},
        {label: '葡萄', value: 2},
        {label: '柚子', value: 3},
        {label: '西瓜', value: 4},
        {label: '杏仁', value: 5},
      ],
      fruit2: [1, 3],

      form: {
        days: 5,
        days2: 10,
      },

      rules: {
        days2: [{validator: checkNumber, trigger: 'blur'}]
      }
    }
  },
  methods: {
    // 清除事件
    myClear() {
      this.$message.success('我是清除事件')
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message.success('提交成功')
        } else {
          this.$message.error('提交失败')
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  }
}
</script>

<style scoped>

</style>
